<template>
<div class="cartSon"  ref="ref1">
    <div class="top">
        <img src="//gw.alicdn.com/tfs/TB1mByhAxTpK1RjSZFMXXbG_VXa-200-200.png_.webp" alt="">
        <p>{{proname.substring(0,6)}}</p>
    </div>
    <div class="goods">
        <!-- 复选框状态改变，触发事件 -->
        <!-- <van-checkbox  @change="newState(index)" checked-color="#FF6E09"   v-model="flag"></van-checkbox> -->
        <!-- 父组件传id，点击时的 -->
        <input type="checkbox" @change="newState(id,$event)" :checked="flag">
    <!-- 父传子 -->
    <van-swipe-cell>
        <van-card :price="originprice" desc="近15天最低" :title="proname" :thumb="img1">
            <template #tags>
                <!--cart传子，加减器 num:是组件的数量，id是点击时index-->
                <Counter :num="num" :id="id" :list="list"></Counter>
            </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="delGoods(id)" />
        </template>
    </van-swipe-cell>
    </div>
</div>
</template>

<script>
import Counter from '../Cart/Counter.vue'
export default {
    components: {
        Counter
    },
    props: {
        // 接收查看购物车接口的数据
        originprice: {
            type:Number
        },
        proname: {
            type: String
        },
        img1: {
            type: String
        },
        // 数量
        num:{
            type: Number
        },
        list:[],
        id: {
            type: Number
        },
        flag: {
            Boolean
        }
      
    },

    data() {
        return {
           
        };
    },
    methods: {
      async  newState(id,e) {
            this.list.some((item, index1) => {
                //接口id是从1开始，index从0开始
                if (id == index1) {
                    item.flag = e.target.checked
                    // 终止后续的循环
                    return true
                }
            })
            // 点击改变购物车数据状态
            const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/selectone', {
                token: localStorage.getItem("token"),
                cartid: this.list[id].cartid,
                flag: e.target.checked

            })
            // 勾选更新数据
            const { data: res1 } = await this.$http.post('http://118.178.238.19:3001/api/cart/updatenum', {
                token: localStorage.getItem("token"),
                cartid: this.list[id].cartid,
                num: this.num

            })
        },
        // 删除购物车
        async delGoods(id) {
        
        // 组件删除点那个删除那个
            this.$refs.ref1.remove()
            this.list.some((item, index) => {
                if (index == id) {
                    item.num = 0
                    return true
                }
            })
                  // 点击发送删除请求，更新接口
         const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/remove', {
             token: localStorage.getItem("token"),
             cartid: this.list[id].cartid,
            
         })

        //  删除，更新数据
         const { data: res1 } = await this.$http.post('http://118.178.238.19:3001/api/cart/updatenum', {
             token: localStorage.getItem("token"),
             cartid: this.list[id].cartid,
             num:0

         })
        //  res是真实数据，无data

        }
    },
    created() {
        // 接收Counter组件,加减器传来的数量，some确保点那个加减哪个按钮
        this.$bus.$on('numAdd', v => {
            // v是传来的num
            this.list.some((item, index) => {
                if (index == v.id) {
                    item.num = v.num
                    return true
                }
            })
        }),
            this.$bus.$on('numDec', v => {

                // v是传来的num，用some循环，一旦符合条件。return
                this.list.some((item, index) => {
                    if (index == v.id) {
                        item.num = v.num
                        return true
                    }
                })
            })
    },
}
</script>

<style lang="scss" scoped>
.cartSon{
    margin:auto;
    width: 7.02rem;
    background: #fff;
    font-size: .28rem;
    color: #333;
     border-radius: .24rem .24rem 0 0;
}
.cartSon .top{
    width: 3.82rem;
    height: .8rem;
    line-height: .8rem;
    display:flex;
    align-items: center;
    justify-content: space-around;
    img{
    width: .36rem;
    height: .36rem;
}
p{
    width: 2.24rem;
}
}
// 商品
        .goods {
            box-sizing:border-box;
            margin: auto;
            width: 7.02rem;
            display: flex;
            background: #fff;
            align-items: center;
            justify-content: space-around;
        }

        ::v-deep .van-card {
            flex: 1;
            padding: .16rem 0;
            background-color: #fff;
            height:2.84rem;

        }
    
        .van-cell__value--alone img {
            width: .24rem;
            height: .24rem;
        }
    
        /* pic大小 */
        .van-card__thumb {
            width:1.8rem;
            margin-left: .40rem;
           
        }
        .van-card__content,
        .van-card__content>div
        {
            align-self: flex-end;
            width: 3.84rem;
            height: 2.96rem;
            // margin-left:.08rem;
            font-size: .28rem;
            color: #333;
        }
    .van-card__bottom .van-card__price{
        position:absolute;
        top: 1.34rem;
        font-size: .28rem;
        color: #ff5000;
    }
    .van-card__desc{
        margin-top: .16rem;
            color: #ff5000;
    }
    .goods .van-checkbox{
        width: .9rem;
        text-align: center;
        margin-left: .40rem;
        overflow:visible;
    }
        /* 步进器 */
        .van-stepper {
            width: 1.84rem;
            position: absolute;
            right: .16rem;
            bottom: 0;
        }
    
        ::v-deep .van-submit-bar {
            bottom: 1rem;
            width: 7.5rem;
        }
        // 变色
      input[type='checkbox'] {
            cursor: pointer;
            position: relative;
            width:.42rem;
            height:.42rem;
            font-size: .32rem;
            visibility: hidden;
        }
    
        input[type='checkbox']::after {
            position: absolute;
            top: 0;
            left:.2rem;
            z-index:9;
            color: #fff;
            width: .42rem;
            height: .42rem;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 50%;
            border: 1px solid #999;
        }
    
        input[type='checkbox']:checked::after {
            width: .42rem;
                height: .42rem;
            content: '✓' !important;
            font-size: .32rem;
            font-weight: bold;
            color:#fff;
            background-color: #ff5000;
              border: none
}
        .goods-card {
            margin: 0;
            background-color: white;
        }

        .delete-button {
            height: 100%;
        }
</style>